<?php
/**
 * Created by PhpStorm.
 * User: l
 * Date: 2018/10/22
 * Time: 11:10
 */
use app\assets\AppAsset;
use app\common\CommonHelper;

AppAsset::register($this);

$base = Yii::$app->request->baseUrl;
AppAsset::addCss($this,$base . '/app/css/skin/jedate.css');
AppAsset::addScript($this,$base . '/app/js/jedate.js');
AppAsset::addScript($this,$base . '/app/js/app-js.js');
AppAsset::addCss($this,$base . '/app/css/vest-list.css');

$model = new CommonHelper();

$tomorrowDate = $model->getTomorrowDateHI();
$yesterdayDate = $model->getYesterdayDateHI();

?>

<style>

</style>
<div class="search-box">
    <select id="cityID" style="margin-left:1.67rem;float: left" onchange="searchFunction()">
        <option value="-1">所在城市</option>
        <option value="179">杭州市</option>
        <?php for($index=0;$index<count($cities);$index++){?>
            <option value="<?= $cities[$index]['city_code']?>"><?= $cities[$index]['city_name']?></option>
        <?php }?>
    </select>

    <p class="datep" style="margin-left: 1.67rem;">
        <img src="<?=$base?>/app/images/new/rc_icon_date.png" class="date-icon">
        <input class="datainp" id="datebut" type="text" placeholder="请选择"  readonly>
    </p>

    <span class="date-split">至</span>

    <p class="datep">
        <img src="<?=$base?>/app/images/new/rc_icon_date.png" class="date-icon">
        <input class="datainp" id="datebut2" type="text" placeholder="请选择"  readonly>
    </p>

    <img id="search-img" onclick="searchFunction()" class="search-icon" style="margin-left: 0.67rem;" src="<?=$base?>/app/images/new/rc_btn_search_n.png">

    <div style="clear:both;"></div>

    <div class="dropdown" style="margin-left:1.67rem;margin-top:0.27rem;font-size: 1.3rem;float: left">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu2"
                data-toggle="dropdown">
            意见状态
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation" >
                <a role="menuitem" tabindex="-1" href="javascript:choosefeedbackStatus('意见状态',-1)">请选择</a>
            </li>
            <li role="presentation" >
                <a role="menuitem" tabindex="-1" href="javascript:choosefeedbackStatus('已处理',1)">已处理</a>
            </li>
            <li role="presentation" >
                <a role="menuitem" tabindex="-1" href="javascript:choosefeedbackStatus('未处理',0)">未处理</a>
            </li>
        </ul>
    </div>
    <div style="clear:both;"></div>

</div>

<div class="dialog-topic" id="remarks" hidden="hidden">
    <div class="topic-box">
        <p style="margin-bottom:1.65rem ;">查看备注</p>
        <div><span>备注：</span><textarea id="feedbackRmk" style="height: 136px; width: 239px; border-color: #efefef; resize: none;" cols="30" rows="10"></textarea></div>

        <div class="footer-div">
            <div class="button-div" style="margin-left: 1.5rem" id="addRemark">保存</div>
            <div class="button-div" style="margin-left: 1.5rem" onclick="hideRemarks()">关闭</div>
        </div>
    </div>
</div>

<div class="dialog-topic" id="opinionDetail" hidden="hidden">
    <div class="topic-box">
        <p style="margin-bottom:1.65rem;">意见内容</p>
        <table style="font-size: 16px; color: black; margin: 5.67rem;">
            <tr style="margin-bottom: 1.65rem; display:block;">
                <td style="color: #78797B;">意见内容：</td>
                <th><textarea id="opinionContent" style="color: #78797B; font-size: 14px; height: 50px; width: 200px; border-color: #efefef; resize: none; border-radius:5px" cols="30" rows="10" readonly></textarea></th>
            </tr>

            <tr style="margin-bottom: 1.65rem; display:block;">
                <td style="color: #78797B;">配图：</td>
                <th id="photoFrame"></th>
            </tr>

            <tr style="margin-bottom: 1.65rem; display:block;">
                <td style="color: #78797B;">意见备注：</td>
                <th><textarea id="opinionRmk" style="color: #78797B; font-size: 14px; height: 50px; width: 200px; border-color: #efefef; resize: none; border-radius:5px" cols="30" rows="10" readonly></textarea></th>
            </tr>
        </table>
        <div class="footer-div">
            <div class="button-div" style="margin-left: 1.5rem" onclick="hideDetail()">关闭</div>
        </div>
    </div>
</div>

<div class="table-box" style="background: none; min-width: 1200px;">
    <table id="table" style="background: #FFFFFF;"></table>

    <div class="showContent" id="show_content" style="position: absolute;display: none;">
        <span class="content" id="content_id">test</span>
    </div>
</div>

<script>

    //初始化事件控件的日期
    var tomorrowDate = '<?php echo $tomorrowDate?>';
    var yesterdayDate = '<?php echo $yesterdayDate?>';
    $("#datebut").val("2018-09-01 00:00");
    $("#datebut2").val(tomorrowDate);
    //初始化表格设置
    $('#table').bootstrapTable({
        toolbar: '#toolbar',        //工具按钮用哪个容器
        clickToSelect: true,//点击行即可选中单选/复选框
        singleSelect: false,//复选框只能选择一条记录
        search: false,//是否显示右上角的搜索框
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sidePagination: "server", //服务端处理分页
        pagination: true,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        method: 'GET',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 8,      //每页的记录行数（*）
//        pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）
        cardView: false,          //是否显示详细视图
        queryParams:setParams,
        uniqueId:'feedback_id',
        url:'feedback',
        responseHandler:dataProcess,
        columns: [{
            field: 'feedback_id',
            align: 'center',
            valign: 'middle',
            title: '意见ID'
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '意见内容',
            formatter:function(value, row, index) {
                var str = row.feedback_content;
                var html = '';
                if(str.length > 60){
                    html = '<div id="content_text' + index + '" class="content-push-body" content="'+str +'" onmouseover="dialogShow(this)" onmouseout="dialogHide()" dynamic-id="'+row.feedback_id+'><span style="color: #0000ff" onclick=opinionDetails('+ row.feedback_id +')>' + str + '</span></div>';
                }else{
                    html = '<div class="content-push-body" dynamic-id="'+row.feedback_id+'><span style="color: #0000ff" onclick=opinionDetails('+ row.feedback_id +')>' + str + '</span></div>';
                }
                return html;
            }
        },{
            field: 'is_deleted',
            align: 'center',
            valign: 'middle',
            title: '状态',
            formatter:function(value, row, index) {
                if (row.is_deleted == 0) {
                    return "待处理";
                } else {
                    return "已处理";
                }
            }

        },{
            field: 'user.user_nickname',
            align: 'center',
            valign: 'middle',
            title: '提交者',
        },{
            field: 'contact',
            align: 'center',
            valign: 'middle',
            title: '联系方式',
            formatter:function(value, row, index) {
                if (row.contact == "%Null%") {
                    return "无";
                } else {
                    return row.contact;
                }
            }
        },{
            field: 'user.city_name',
            align: 'center',
            valign: 'middle',
            title: '城市',
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '备注',
            formatter:function(value, row, index) {
                if (row.feedback_rmk) {
                    return row.feedback_rmk;
                } else {
                    return "无";
                }
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '操作',
            formatter:function(value,row,index) {
                if (row.is_deleted == 0) {
                    return '<span style="color: #0000ff" onclick="editStatus('+row.feedback_id+', 1)"> 设为已处理 </span> | <span style="color: #0000ff" onclick="showRemarks('+ row.feedback_id +')"> 备注 </span>';
                } else {
                    return '<span style="color: #0000ff" onclick="editStatus('+row.feedback_id+', 0)"> 设为未处理 </span> | <span style="color: #0000ff" onclick="showRemarks('+ row.feedback_id +')"> 备注 </span>';
                }
            }
        }]
    });

    function dataProcess(res){
        var data = res;
        return {
            'rows':data.rows,
            'total':data.total
        }

    }

    var feedbackStatus = -1;

    function setParams(params){

        var start_date = $('#datebut').val(); //按日期搜索
        var end_date = $('#datebut2').val();

        if (start_date == "2018-09-01 00:00") {
            var start_date = undefined; //按日期搜索
            var end_date = undefined;
        }

        if (start_date && start_date != undefined && end_date && end_date != undefined){
            params.start_date = start_date;
            params.end_date = end_date;
        }

        var content = $("#nameId").val();
        if (content && content != undefined && content.length > 0){
            params.dynamic_title = content;
        }

        var cityCode = $("#cityID").val();
        if(cityCode != -1) {
            params.city_code = cityCode;
        }

        if (feedbackStatus != -1) {
            params.feedback_status = feedbackStatus;
        }

        return params;
    }

    var detail = $('#show_content');
    var text = $('#content_id');
    var _w=document.documentElement.clientWidth;
    var paddingLeft = (_w - 1200)/2;

    function dialogShow(content){
        var string = $(content).attr('content');
        var top =  $(content).offset().top;
        var left =  $(content).offset().left;
        
        text.text(string);
        var height = detail.outerHeight(true);
        var width = detail.outerWidth(true);
        detail.css("top",top - height);
        detail.css('left',left - paddingLeft - 10);
        detail.show();
    }

    function choosefeedbackStatus(name,status){
        feedbackStatus = status;
        $("#dropdownMenu2").text(name);
        $('#table').bootstrapTable('refreshOptions', {pageNumber: 1});
    }

    function dialogHide(){
        detail.hide();
    }

    function searchFunction(){
        $('#table').bootstrapTable('refreshOptions', {pageNumber: 1});
    }

    var operateController = {
        operateApi : "operate-dynamic",
        operateFunc:function(dynamic_id , type){

            var confirmStr = "确认删除动态吗？";

            if(type == 0)
                confirmStr = "确认恢复动态吗？";

            if(confirm(confirmStr)){
                var param = {
                    dynamic_id:dynamic_id,
                    type:type
                };

                sendAjax(this.operateApi,"POST",param,true,function(res){
                    var data = JSON.parse(res);
                    if(data.code == 0)
                        $('#table').bootstrapTable('refresh');
                });
            }

        }
    };

    function goToDetail(view){
        window.open("dynamic-detail?dynamic_id="+$(view).attr("dynamic-id"));
    }

    // 查看备注
    function showRemarks(feedbackId) {
        $("#addRemark").on("click", function () {

            var feedback = 'feedback';
            var feedback_rmk = $('#feedbackRmk').val();

            if(feedback_rmk.length == 0){
                alert("请填写备注");
                return;
            }

            param = {
                feedback_id : feedbackId,
                feedback_rmk : feedback_rmk
            }

            $(".loading-area").show();
            sendAjax(feedback, "POST", param, false, function(data){
                var res = JSON.parse(data);
                if (res.code == 0) {
                    console.log(data);
                    alert(res.msg);
                    location.reload();
                } else {
                    alert(res.msg);
                }
            });
        });

        $('#remarks').show();
    }

    // 隐藏备注
    function hideRemarks() {
        $("#remarks").hide();
    }

    // 显示添加页面
    function showDialog(){
        $("#add-gift").show();
    }

    // 隐藏添加页面
    function hideDialog(){
        $("#add-gift").hide();
    }

    // ajax修改状态
    function editStatus(feedback_id, is_deleted){
        report = "feedback";

        if (confirm('确认修改该状态？')) {
            var param = {'feedback_id' : feedback_id, 'status' : is_deleted};

            sendAjax(this.report,"POST",param,false,function(res){
                if(res.code != 0){
                    $('#table').bootstrapTable('refresh');
                }else {
                    alert(res);
                }
            });
        }
    }

    // 显示意见详情
    function opinionDetails(feedbackId){
        var detail = 'opinion-details';
        var param = {
            feedback_id : feedbackId
        }

        sendAjax(detail, "POST", param, false, function(res){
            var row = JSON.parse(res);
            if (row) {

                if (row.feedback_content != '%Null%' && row.feedback_content != null) {                    
                    $('#opinionContent').val(row.feedback_content);
                } else {
                    $('#opinionContent').val('无');
                }

                var admin = "";
                if (row.feedback_pic != '%Null%' && row.feedback_pic != null) {
                    var arr = row.feedback_pic.split(';');
                    $.each(arr, function(k, v){
                        admin += '<th><img id="opinionPic" style="width: 80px; height: 80px;" src="'+ v +'" readonly></th>';
                    });
                    // console.log(admin);
                    $("table tr th").eq(1).html(admin);
                } else {
                    admin = '<th><img id="opinionPic" style="width: 80px; height: 80px;" src="<?= $base?>/app/images/dynamic/default-logo.png" readonly></th>';
                    $("table tr th").eq(1).html(admin);
                }

                if (row.feedback_rmk != '%Null%' && row.feedback_rmk != null) {
                    $('#opinionRmk').val(row.feedback_rmk);
                } else {
                    $('#opinionRmk').val('无');
                }
                $('#opinionDetail').show();

            } else {
                alert(row);
            }
        });
    }

    // 关闭详情
    function hideDetail() {
        $('#opinionDetail').hide();
    }
</script>